<template>
  <el-container class="home-container">
    <!--     头部区域-->
    <el-header>
      <div>
        <img src="../assets/logo.png" alt="" />
        <span>电商管理后台系统</span>
      </div>
      <el-button type="info" @click="loginout">退出</el-button>
    </el-header>
    <!--     页面主题区域-->
    <el-container>
      <!--       页面侧边栏-->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 折叠展开按钮 -->
        <div class="toggle-button" @click="toggleCollapse" focus>|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu
          background-color="#DCDFE6"
          text-color="#000000"
          active-text-color="#409fff"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath"
        >
          <!-- 一级菜单-->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            <!-- 一级菜单模板 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="item.icons"></i>
              <!-- 文本 -->
              <span>{{ item.label }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="selectMenu(subItem)"
            >
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{ subItem.label }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!--       右侧内容-->
      <el-main>
        <!-- tab标签页区域 - 用于标签页切换 -->
        <div class="tabs-switch-page">
          <el-tag
            size="medium"
            v-for="(tab, index) in tabList"
            :key="tab.name"
            @close="handleClose(tab, index)"
            @click="changeMenu(tab)"
            :closable="tab.name !== 'home'"
            :effect="activePath === tab.name ? 'dark' : 'plain'">
            {{tab.label}}
          </el-tag>
        </div>
        <!-- 路由占位符，用于展示内容区的内容 -->
        <div style="padding:15px">
          <keep-alive :include="catch_components">
            <router-view />
          </keep-alive>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      menulist: [],
      // iconsList: {
      //   18: 'iconfont icon-Customermanagement',
      //   19: 'iconfont icon-integral',
      //   101: 'iconfont icon-bags',
      //   102: 'iconfont icon-order',
      //   145: 'iconfont icon-data'
      // },
      isCollapse: false
      // 被激活的链接地址
      // activePath: ''
    }
  },
  created() {
    this.getMenuList()
    // this.activePath = window.sessionStorage.getItem('activePath')
  },
  computed: {
    ...mapState({ // 从 state 中的到的计算属性
      activePath: state => state.activePath, // 已选中菜单
      tabList: state => state.tabList, // tags菜单列表
      catch_components: state => state.catch_components // keepalive缓存
    })
  },
  methods: {
    loginout() {
      // console.log('退出')
      // 清除token 并跳转到login页面 切记login没有空格
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 点击按钮 切换展开和折叠
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    // 获取所有的菜单
    async getMenuList() {
      const { data: res } = await this.$http.get('menus/getmenus')
      this.menulist = res.data
      // console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
    },
    // 保存链接的激活状态颜色值
    // saveNavState(activePath) {
    //   window.sessionStorage.setItem('activePath', activePath)
    // }
    // 点击菜单 - 传入name，添加到keepalive缓存页面
    selectMenu(item) {
      console.log(item)
      // 加入keepalive缓存
      this.$store.commit('addKeepAliveCache', item.path)
      // 添加tags标签
      // 访问wellcome 就代表home
      var path = item.path === 'wellcome' ? 'home' : item.path
      var submenu = {
        path: path,
        name: path,
        label: item.label
      }
      console.log('输出', submenu)
      // 修改选中菜单
      this.$store.commit('selectMenu', submenu)
    },
    // 关闭tab标签
    handleClose(tab, index) {
      // 历史选中菜单
      var oldActivePath = this.$store.state.activePath
      // 历史已选中菜单列表
      var oldTabList = this.$store.state.tabList
      // 计算标签个数
      const length = oldTabList.length - 1
      // 删除tabList中的该对象
      for (let i = 0; i < oldTabList.length; i++) {
        const item = oldTabList[i]
        if (item.name === tab.name) {
          oldTabList.splice(i, 1)
        }
      }
      // 删除keepAlive缓存
      this.$store.commit('removeKeepAliveCache', tab.name)
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (tab.name !== oldActivePath) {
        return
      }
      // 如果length为1，必然只剩下首页标签，此时关闭后，更新到首页
      if (length === 1) {
        // 同时存储菜单
        this.$store.commit('closeTab', { activePath: 'home', tabList: oldTabList })
        // tab页向左跳转
        // this.$router.push({ name: oldTabList[index - 1].name })
        this.$router.push('/' + oldTabList[index - 1].name)
        // 不再向下执行
        return
      }
      // 关闭的标签是最右边的话，往左边跳转一个
      if (index === length) {
        // 同时更新路径
        oldActivePath = oldTabList[index - 1].name
        // 同时存储菜单
        this.$store.commit('closeTab', { activePath: oldActivePath, tabList: oldTabList })
        // tab页向左跳转
        this.$router.push('/' + oldTabList[index - 1].name)
        // this.$router.push({ name: oldTabList[index - 1].name })
      } else {
        // 同时更新路径
        oldActivePath = oldTabList[index].name
        // 同时存储菜单
        this.$store.commit('closeTab', { activePath: oldActivePath, tabList: oldTabList })
        // tab页向右跳转
        // this.$router.push({ name: oldTabList[index].name })
        this.$router.push('/' + oldTabList[index].name)
      }
    },
    // 点击标签跳转路由
    changeMenu(item) {
      // 历史选中菜单
      var oldActivePath = this.$store.state.activePath
      // 首先判断点击的是否是自己，如果是自己则return
      if (oldActivePath === item.name) {
        return
      }
      // 不是自己，存储菜单
      this.$store.commit('changeMenu', item.name)
      // 页面跳转
      console.log('选择的标签路由', item.name)
      // 跳转路由
      this.$router.push('/' + item.name)
      // this.$router.push({ name: item.name })
    }

  }
}
</script>

<style lang="less" scoped>
// tab页
.tabs-switch-page{
  display: flex;
  align-items:center;
  height: 40px;
  background-color:#fff;
  overflow: hidden;
}
.el-header {
  background-color: #909399;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #ffffff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
  img {
    width: 50px;
    height: 50px;
  }
}
.el-aside {
  background-color: #dcdfe6;
  .el-menu {
    border-right: 0;
  }
}
.el-main {
  background-color: #ffffff;
}
.home-container {
  height: 100%;
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: #dcdfe6;
  font-size: 10px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer; // 鼠标悬停变小手
}
</style>
